iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
1
Modern Web

連續30天的超實務網頁設計的垂直置中教學系列 第 11

使用 Flex + align-content 來製作垂直置中

  • 分享至 

  • xImage
  •  

簡言

在正常的狀況下,align-conent 僅能對次軸多行 flex item 做置中,但是當我今天子層物件不確定有多少個時,且有時可能會有單個的情況出現的話,此技巧就能用到了(當然你也能其他解法),既然是多行子物件才能用,那我們就為單個子物件多加兩個兄弟吧,使用 :before 以及 :after 來讓子物件增加到多個,這樣就能使用 flex 的 align-content 屬性來置中囉。

原理說明

CSS中 Flex 的 align-content 屬性,能針對 flex 物件內的子物件做次軸的對齊設定,其中唯一需要注意的重點就是 align-content 只針對多行子物件這種狀況有效,若是僅有單行子層的話是無效的,所以在這個例子中,為了不增加 HTML TAG 的數量,所以採用了CSS偽類來當作額外添加的首行與末行,這樣我們就可以達到多行子物件的情境了,如此一來也就能讓 align-content 產生作用了。Amos 寫出這個寫法時覺得很有趣,沒想到偽類這樣用也可以,各位覺得呢? ^^

原始碼

HTML

<div class="box box11">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box11:before,
.box11:after{
  content: '';
  display: block;
  width:100%;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Flex + align-self 做垂直置中
下一篇
使用 Grid + template 做垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
PeterLiao
iT邦新手 4 級 ‧ 2019-09-09 16:54:55

Amos大大你好, 我把範例程式碼 :before, :after 內容都註解掉, 也是維持置中狀態噎/images/emoticon/emoticon19.gif

CSScoke iT邦新手 3 級 ‧ 2019-09-09 23:50:22 檢舉

你換到 safari 看看^^
會壞掉XD

PeterLiao iT邦新手 4 級 ‧ 2019-09-10 11:33:35 檢舉

好的,它很爭氣的整組壞了了/images/emoticon/emoticon12.gif

CSScoke iT邦新手 3 級 ‧ 2019-09-10 21:49:53 檢舉

/images/emoticon/emoticon01.gif

我要留言

立即登入留言